<template>
  <div class="Profile-edu">
    <div class="Profile-edu-title">
      教育信息
    </div>
    <div class="Profile-edu-info">
      <div class="Profile-edu-info-school">
        <div style="width: 100px;">学校名称</div>
        <el-input  v-model="userinfo.school" placeholder="未填写"  class="editEduInfo" ></el-input>
      </div>
      <div class="Profile-edu-info-major">
        <div style="width: 100px;">专业</div>
        <el-input  v-model="userinfo.major" placeholder="未填写" class="editEduInfo"  ></el-input>
      </div>
      <div class="Profile-edu-info-studyTime">
        <div style="width: 100px;">入学时间</div>
        <el-date-picker
            style="margin-left: 5px"
            v-model="userinfo.studyTime"
            type="date"
            placeholder="入学时间" class="editEduInfo" >
        </el-date-picker>
      </div>
      <div class="Profile-edu-info-studyTime">
        <div style="width: 100px;">学历</div>
        <el-select v-model="userinfo.eduLevel" placeholder="请选择" class="editEduInfo" >
          <el-option
              v-for="item in user.eduLevelOption"
              :key="item.value"
              :label="item.label"
              :value="item.label">
          </el-option>
        </el-select>
      </div>
      <div class="ProfileConfirm" v-show="showSaveButton">
        <div class="Profile-general-edu-info-confim" style="display: flex; justify-content: center">
          <el-button  type="danger" plain @click="updateEduInfo">保存</el-button>
          <el-button  plain @click="hideSaveButton">取消</el-button>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
import {updateUserInfo} from "@/api/user";
export default {
  name: "ProfileEdu",
  props:["userinfo"],
  data(){
    return{
      showSaveButton:false,
       user:{
           school:"",
           major:"",
           studyTime:"",
           eduLevel:"",
           eduLevelOption:[
             {  value: '选项1',
               label: '博士后'
             },
             {  value: '选项2',
               label: '博士'
             },
             {  value: '选项3',
               label: 'MBA'
             },
             {  value: '选项4',
               label: '硕士'
             },
             {  value: '选项5',
               label: '本科'
             },
             {  value: '选项6',
               label: '大专'
             },
             {  value: '选项7',
               label: '中专'
             },
             {  value: '选项8',
               label: '中技'
             },
             {  value: '选项9',
               label: '高中'
             },
             {  value: '选项10',
               label: '初中'
             },
           ]
       }
    }
  },
  methods:{
    show(){
      var name= document.getElementsByClassName("editEduInfo")
      for (var i=0;i<name.length;i++){
        name[i].onclick=()=>{
          this.showSaveButton=true;
        }
      }


    },
    hideSaveButton(){
      this.showSaveButton=false;
      location.reload();
    },
    updateEduInfo(){
      updateUserInfo(this.userinfo);
      this.showSaveButton=false;
    }
  },
  mounted() {
    this.show();
  },
}
</script>
<style >
.Profile-edu{
  width: 100%;
  height: fit-content;
}
.Profile-edu-title{
  font-size: 18px;
  font-weight: bold;
  height: 48px;
  line-height: 48px;
}
.Profile-edu-info{
  width: 100%;
  height: 100%;
  padding: 16px 58px 16px 15px;
  display: flex;
  flex-direction: column;
}
.Profile-edu-info > div{
  height: fit-content;
  display: flex;
  align-content: center;
  font-size: small;
  margin-top: 20px;
}
.Profile-edu-info > div >div{
  line-height: 50px;
}
.Profile-edu-info .el-input__inner{
  width: 300px;
  margin-left: 10px;
  border:none ;
}
.ProfileConfirm{
  width: 100%;
  height: fit-content;
  justify-content: center;
}

</style>